<template>
  <section class="single-service-area ">
    <header class="header-area">
      <div class="main-header">
        <div class="container">
          <div class="row">
            <div class="col-lg-12" style="width: 100%;">
              <div
                class="main-header-item d-flex justify-content-between align-items-center"
              >
                <div class="main-header-menus  d-flex">
                  <div class="logo" style="height: 10px">
                    <a href="/"
                      ><img
                        style="height: 70px"
                        src="/assets/images/logo.png"
                        alt=""
                    /></a>
                  </div>

                  <div class="header-menu d-none d-lg-block">
                    <ul>
                      <li>
                        <a class="active" @click="$router.push('/')">首页</a>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/search')"
                          >信息智能处理</a
                        >
                        <ul class="sub-menu">
                          <li>
                            <nuxt-link to="/search">信息处理详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/single-service')"
                          >智能处理样理展示</a
                        >
                        <ul class="sub-menu">
                          <li>
                            <nuxt-link to="/single-service">样例展示</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/authors')"
                          >经典作者介紹</a
                        >
                        <ul class="sub-menu">
                          <li><nuxt-link to="/authors">作者介绍</nuxt-link></li>
                          <li>
                            <nuxt-link to="/single-author">作者详情</nuxt-link>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href="#" @click="$router.push('/hist')"
                          >查看历史记录</a
                        >
                        <ul class="sub-menu">
                          <li><nuxt-link to="/hist">历史记录</nuxt-link></li>
                        </ul>
                      </li>
                      <li>
                        <a v-if="!username" @click="$router.push('login')"
                          >去登陆</a
                        >
                        <span v-else>{{ username }}</span>
                      </li>
                      <li>
                        <a v-if="username" @click="Esc()">退出</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-4 col-md-7 col-sm-9 ">
          <div class="service-sidebar mt-30">
            <div class="service-sidebar-list">
              <ul>
                <li>
                  <nuxt-link to="/single-service-3">
                    郑伯克段于鄢-左丘明
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/single-service-4">
                    史记-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="">
                    三国志-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="">
                    资治通鉴-单篇
                  </nuxt-link>
                </li>
                <li>
                  <nuxt-link to="/single-service">
                    赤壁赋-苏轼
                  </nuxt-link>
                </li>

                <li>
                  <nuxt-link to="/single-service-2">
                    上林赋-司马相如
                  </nuxt-link>
                </li>
              </ul>
            </div>
            <div class="service-sidebar-help"></div>
          </div>
        </div>
        <div class="col-lg-8 order-lg-2 order-1">
          <div class="single-project mt-30">
            <div class="single-project-thumb"></div>
            <div class="single-project-content">
              <h3 class="title">《赤壁赋》</h3>
              <p>
                壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，
                徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
                于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，
                如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇。
                苏子愀然，正襟危坐而问客曰：“何为其然也？”客曰：“月明星稀，乌鹊南飞，此非曹孟德之诗乎？西望夏口，东望武昌，山川相缪，郁乎苍苍，此非孟德之困于周郎者乎？方其破荆州，下江陵，顺流而东也，舳舻千里，旌旗蔽空，酾酒临江，横槊赋诗，固一世之雄也，而今安在哉？况吾与子渔樵于江渚之上，侣鱼虾而友麋鹿，
                驾一叶之扁舟，举匏樽以相属。寄蜉蝣于天地，渺沧海之一粟。哀吾生之须臾，羡长江之无穷。挟飞仙以遨游，抱明月而长终。知不可乎骤得，托遗响于悲风。”
                苏子曰：“客亦知夫水与月乎？逝者如斯，而未尝往也；盈虚者如彼，而卒莫消长也。盖将自其变者而观之，则天地曾不能以一瞬；自其不变者而观之，
                则物与我皆无尽也，而又何羡乎!且夫天地之间，物各有主,苟非吾之所有，虽一毫而莫取。惟江上之清风，与山间之明月，耳得之而为声，
                目遇之而成色，取之无禁，用之不竭，是造物者之无尽藏也，而吾与子之所共适。”客喜而笑，洗盏更酌。肴核既尽，杯盘狼籍。相与枕藉乎舟中，不知东方之既白。
              </p>
            </div>
            <div class="row">
              <div class="col-lg-6 col-md-6"></div>
              <div class="col-lg-6 col-md-6"></div>
            </div>
            <div class="single-project-text">
              <a class="main-btn mt-55" href="#">下载</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  methods: {
    Esc() {
      this.username = "";
      console.log("登出");
      localStorage.clear();

      this.$router.push("/");
    }
  },
  data() {
    return {
      username: "",
      title: "NLP | 赤壁赋"
    };
  },

  mounted() {
    let userName = JSON.parse(localStorage.getItem("user"));
    if (userName) {
      //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
      this.username = userName.username;
    }
  }
};
</script>
